<template>
  <div class="page-bg">
    <editPage @subForm="subForm" v-loading="loading">
      <el-tabs v-model="tabs.active">
        <el-tab-pane label="页面内容编辑" name="basic">
          <form-item name="标题">
            <el-input
              placeholder="请输入"
              maxlength="100"
              v-model="formData.productName"
              show-word-limit
            />
          </form-item>

          <form-item name="产品封面图片">
            <form-img
              v-model="formData.productImage"
              @pickImg="pickImg('img', $event)"
            />
          </form-item>
          
          <div class="flex c1">
            <form-item name="价格(元)">
              <el-input
                placeholder="请输入"
                type="number"
                maxlength="7"
                v-model="formData.productPrice"
                show-word-limit
              />
            </form-item>
            <form-item name="分类">
              <el-select v-model="formData.type_id" placeholder="请选择分类">
                <el-option
                  v-for="item in typesList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </form-item>
          </div>

          <form-item name="详情">
            <editor
              ref="editorRef"
              @selectImg="pickImg('editor')"
              :showTemplate="false"
            />
          </form-item>

          <form-item name="是否下架">
            <el-switch
              active-value="1"
              inactive-value="0"
              v-model="formData.a_show"
              active-text="上架"
              inactive-text="下架"
            >
            </el-switch>
          </form-item>
        </el-tab-pane>
        <el-tab-pane label="SEO内容编辑" name="seo">
          <form-item name="seo关键词">
            <el-input
              v-model.trim="formData.keywords"
              type="textarea"
              placeholder="请输入(选填)"
            ></el-input>
          </form-item>
          <form-item name="seo描述">
            <el-input
              v-model.trim="formData.description"
              type="textarea"
              placeholder="请输入(选填)"
            ></el-input>
          </form-item>
        </el-tab-pane>
      </el-tabs>
    </editPage>

    <layer-img v-model="imgOption.show" @getImg="getImg" />
  </div>
</template>

<script lang="ts">
export default {
  name: "GoodsEdit",
};
</script>

<script setup lang="ts">
import editPage from "@/components/edit-page.vue";
import formItem from "@/components/form-item.vue";
import layerImg from "@/components/img/layer-img.vue";
import formImg from "@/components/img/form-img.vue";
import editor from "@/components/editor/index.vue";
import config from "@/common/config";
import { useImgHook } from "@/composition/useImgApi";
import { ElMessage } from "element-plus";
import { post } from "@/common/http";

const route = useRoute();
const router = useRouter();
const editorRef = ref<any>(null); //富文本
const loading = ref(false);
const queryID = route.query?.id; //页面参数
const typesList = ref<[any]>(); //分类列表
const formData = ref<any>({
  productName: "",
  type_id: "",
  productPrice: "",
  sort: "",
  productImage: "",
  a_show: "1",
  keywords: "",
  description: "",
});

const tabs = reactive({
  active: "basic",
});

onMounted(() => {
  //获取下拉分类列表
  post("api/Common/type_list_data", {
    type: "goods",
    page: 1,
    limit: 99999,
  }).then((res) => {
    typesList.value = res.data;
  });
  if (queryID) {
    //获取编辑详情
    loading.value = true;
    post("api/goods/get_detail_a", { id: queryID }).then((res) => {
      formData.value = res.data.details;
      formData.value.productImage = res.data.details.productImage;

      //编辑器默认值
      editorRef.value.content = res.data.details.content;
      loading.value = false;
    });
  }
});

const { imgOption, pickImg } = useImgHook();

// const testImg = ref<string[]>([]);

//获取弹窗选择的图片
function getImg(data: any) {
  //单图上传
  if (imgOption.option.name === "img") {
    formData.value.productImage = data.imgUrl;
  }

  //多图上传
  // if (imgOption.option.name === "imgs") {
  //   if (imgOption.option.index != -1) {
  //     testImg.value[imgOption.option.index] = data.imgUrl;
  //   } else {
  //     testImg.value.push(data.imgUrl);
  //   }
  // }

  //编辑器图片上传
  if (imgOption.option.name === "editor") {
    //编辑器选择图片
    editorRef.value.editorObj.execCommand(
      "inserthtml",
      `<p><img style='max-width:100%' src='${
        config.serverImg + data.imgUrl
      }'/></p>`
    );
  }
}

//提交
function subForm() {
  let data = toRaw(formData.value);
  if (!data.productName) return ElMessage.error("请输入产品名称");
  if (!data.productImage.length) return ElMessage.error("请上传产品图片");
  if (!data.type_id) return ElMessage.error("请选择产品类型");
  data.productImage = data.productImage;
  data.content = editorRef.value.content;
  if (queryID) data.id = queryID;
  post("api/goods/saveData", data).then((res) => {
    ElMessage.success(res.msg);
    setTimeout(() => {
      router.push("/goods/list");
    }, 1000);
  });
}
</script>

<style lang="scss" scoped>
.c1 > div {
  margin-right: 20px;
}
</style>
